<template>
    <div class="modifyUserName">
      <div class="title">
        <div class="back-wrapper">
          <back></back>
        </div>
        修改用户名
      </div>
      <div class="content">
        <div class="ipt-userName-wrapper border-1px">
          <span class="name">昵称</span><input type="text" class="ipt-userName" v-model="name">
          <span class="cancel" @click="name=''"></span>
        </div>
        <div class="btn-wrapper">
          <button class="btn" @click="_modifyUserName">提交</button>
        </div>
      </div>
    </div>
</template>

<script>
  import back from '../../../components/back/back'
  import {Toast} from 'mint-ui'
  import {getStorage,setStorage} from "../../../common/js/localStorage";
  import global from '../../../common/js/global'
    export default {
        name: "modifyUserName",
        components:{
          'back':back
        },
        data(){
          return{
            name:''
          }
        },
        methods:{
          _modifyUserName(){
            this.$axios(
              {
                method: 'post',
                headers: {
                  "Content-Type": "application/json",
                  "MOBILE-DEVICE": 'PSD_H5_1_MPS',
                  "JSESSIONID": getStorage('userInfo') ? getStorage('userInfo').JSESSIONID : ''
                },
                url: global.$host+'/member/changeUserInfo',
                data: {
                  userName:this.name
                }
              }
            ).then((res) => {
              if (res.status === global.ERR_OK) {
                if (res.data.code === 0) {
                  Toast(res.data.data.msg)
                  setStorage('userName',this.name)
                  this.$router.push('/index/user')
                } else {
                  Toast(res.data.errorMsg)
                }
              } else {
                Toast('服务器错误，错误代码:' + res.status)
              }
            }).catch((res) => {
            });
          }
        },
        mounted() {
          this.name=this.$route.query.name
        }
    }
</script>

<style scoped lang="stylus">
  @import "../../../common/stylus/mixin.styl"
  .modifyUserName
    position absolute
    height 100%
    width 100%
    background #101011
    user-select none
    overflow hidden
    .title
      position relative
      padding 10px 0
      height 22px
      line-height 22px
      text-align center
      font-size 16px
      color #ffffff
      .back-wrapper
        position absolute
        left 0
        top 10px
        width 36px
        height 22px
    .content
      height calc(100% - 42px)
      .ipt-userName-wrapper
        position relative
        height 33px
        padding 15px 15px 6px 15px
        text-align left
        border-1px(#404040)
        .name,.ipt-userName
          vertical-align bottom
        .name
          color #F7C20F
          font-size 14px
          line-height 33px
          display inline-block
          height 100%
          width 35px
          text-align left
        .ipt-userName
          width calc(100% - 90px)
          height 100%
          background none
          border none
          outline none
          color #ffffff
          font-size 14px
          padding-left 40px
        .cancel
          display block
          position absolute
          right 15px
          top 23px
          height 16px
          width 16px
          background url("icon_cancel.svg")no-repeat center/8px 8px
      .btn-wrapper
        height 44px
        padding 33px 15px 15px 15px
        .btn
          width 100%
          height 100%
          background  #F7C20F
          color #090909
          border none
          border-radius 3px
          font-size 16px
          outline none
</style>
